<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("contextPath",request.getContextPath());
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${contextPath}/js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$("#registerTip").hide();
			var mail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			var $username = $("#username");
			var $usernameTip = $("#usernameTip");
			var $password = $("#password");
			var $passwordTip = $("#passwordTip");
			var $passwordConfirm = $("#passwordConfirm");
			var $passwordConfirmTip = $("#passwordConfirmTip");
			var $submitButton = $("#submitButton");
			$username.val("");
			$username.focus(function (){
				 $usernameTip.css("color","gray");
				 $usernameTip.text("请输入常用邮箱");
			});
			$username.blur(function(){
				var username = $("#username").val();
				if("" == username){
					$usernameTip.text("");
					return;
				}
				if(!mail.test($username.val())){
					$usernameTip.css("color","red");
					$usernameTip.text("邮箱格式有误,请重新输入");
					return;
				}
				
				$.ajax({
					url:"${contextPath}/user/checkUsername/"+username+"/",
					type:"POST",
					success:function(o){
						  if(o && o.result) {
							  $usernameTip.css("color","#99CC00");
							  $usernameTip.text("√");
						  }else{
							  $usernameTip.css("color","red");
							  $usernameTip.text("此邮箱已被注册");
						  }
					},
					error:function(o){
						alert("error");
					}
				});	
			});
			
			$password.keyup(function(){
				var password = $password.val();
				if(password.length == 0){
					$passwordTip.text("");
					return;
				}
				if(password.length<6||password.length>15){
					$passwordTip.css("color","red");
					$passwordTip.text("密码长度应6-15");
					return;
				}
				$passwordTip.css("color","#99CC00");
				$passwordTip.text("√");
			});
			
			$password.blur(function(){
				var password = $password.val();
				var passwordConfirm = $passwordConfirm.val();
				if(password == ""){
					$passwordTip.text("");
				}
				if(passwordConfirm != "" && passwordConfirm != password ){
					$passwordConfirmTip.css("color","red");
					$passwordConfirmTip.text("两次密码不一致");
				}
				if(passwordConfirm != "" && passwordConfirm == password ){
					$passwordConfirmTip.css("color","#99CC00");
					$passwordConfirmTip.text("√");
				}
			});
			
			$passwordConfirm.focus(function(){
				$passwordConfirmTip.text("");
			});
			
			$passwordConfirm.blur(function(){
				var passwordConfirm = $passwordConfirm.val();
				var password = $password.val();
				if(passwordConfirm.length == 0){
					$passwordConfirmTip.text("");
					return;
				}
				if(passwordConfirm != password){
					$passwordConfirmTip.css("color","red");
					$passwordConfirmTip.text("两次密码不一致");
					return;
				}
				$passwordConfirmTip.css("color","#99CC00");
				$passwordConfirmTip.text("√");
			});	
			
			$submitButton.click(function(){
				if($usernameTip.text() != "√"){
					$usernameTip.css("color","red");
					$usernameTip.text("请正确填写用户名");
				}
				if($passwordTip.text() != "√"){
					$passwordTip.css("color","red");
					$passwordTip.text("请正确填写密码");
				} 
				if($passwordConfirmTip.text() != "√"){
					$passwordConfirmTip.css("color","red");
					$passwordConfirmTip.text("请正确填写密码确认");
				}
				if($usernameTip.text() == "√" && $passwordTip.text() == "√" && $passwordConfirmTip.text() == "√"){
					$usernameTip.text("");
					$passwordTip.text("");
					$passwordConfirmTip.text("");
					$("#registerForm").submit();
					$username.val("");
				};
			});
		});
		
	</script>
  </head>
  
  <body>
  	 <a href="">首页</a>
     <form id="registerForm" action="user/register" method="post">
	     <table border="1">
	     	<tr>
	     		<td>用户名:</td><td><input id="username" name="username" type="text"></td><td id="usernameTip" width="200"></td>
	     	</tr>
	     	<tr>	
	     		<td>密码:</td><td><input id="password" name="password" type="password" ></td><td id="passwordTip"></td>
	     	</tr>
	     	<tr>
	     		<td>密码确认:</td><td><input id="passwordConfirm" name="passwordConfirm" type="password"></td><td id="passwordConfirmTip"></td>
	     	</tr>
	     	<tr>
	     		<td><input id="submitButton" type="button" value="注册"  ></td>
	     	</tr>
	     </table>
     </form>
   
  </body>
</html>
